<div class="container">
  <div class="row">
    <div class="col">
      <h1 class="h3 line-height-1 mb-4 text-center">
        <span class="d-none d-sm-block" i18n>Features</span>
        <small class="text-muted" i18n>
          Check out the numerous features of Ghostfolio to manage your wealth
        </small>
      </h1>
      <div class="row">
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 i18n>Stocks</h4>
                <p class="m-0">Keep track of your stock purchases and sales.</p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 i18n>ETFs</h4>
                <p class="m-0">
                  Are you into ETFs (Exchange Traded Funds)? Track your ETF
                  investments.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 i18n>Bonds</h4>
                <p class="m-0">
                  Manage your investment in bonds and other assets with fixed
                  income.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 i18n>Cryptocurrencies</h4>
                <p class="m-0">
                  Keep track of your Bitcoin and Altcoin holdings.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 i18n>Dividend</h4>
                <p class="m-0">
                  Are you building a dividend portfolio? Track your dividend in
                  Ghostfolio.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 class="align-items-center d-flex" i18n>Wealth Items</h4>
                <p class="m-0">
                  Track all your treasuries, be it your luxury watch or rare
                  trading cards.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 class="align-items-center d-flex" i18n>Emergency Fund</h4>
                <p class="m-0">
                  Define your emergency fund you are comfortable with for
                  difficult times.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 class="align-items-center d-flex" i18n>Liabilities</h4>
                <p class="m-0">
                  Manage your financial liabilities, such as your student loan,
                  to stay ahead of your financial obligations.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 class="align-items-center d-flex" i18n>
                  Import and Export
                </h4>
                <p class="m-0">Import and export your investment activities.</p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 i18n>Multi-Accounts</h4>
                <p class="m-0">
                  Keep an eye on all your accounts across multiple platforms
                  (multi-banking).
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 class="align-items-center d-flex">
                  <span i18n>Portfolio Calculations</span>
                  @if (hasPermissionForSubscription) {
                    <gf-premium-indicator class="ml-1" />
                  }
                </h4>
                <p class="m-0">
                  Check the rate of return of your portfolio for
                  <code>Today</code>, <code>WTD</code>, <code>MTD</code>,
                  <code>YTD</code>, <code>1Y</code>, <code>5Y</code>, and
                  <code>Max</code>.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 class="align-items-center d-flex">
                  <span i18n>Portfolio Allocations</span>
                  @if (hasPermissionForSubscription) {
                    <gf-premium-indicator class="ml-1" />
                  }
                </h4>
                <p class="m-0">
                  Check the allocations of your portfolio by account, asset
                  class, currency, region, and sector.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 class="align-items-center d-flex">
                  <span i18n>Static Analysis</span>
                  @if (hasPermissionForSubscription) {
                    <gf-premium-indicator class="ml-1" />
                  }
                </h4>
                <p class="m-0">
                  Identify potential risks in your portfolio with Ghostfolio
                  X-ray, the static portfolio analysis.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 class="align-items-center d-flex">
                  <span i18n>Watchlist</span>
                  @if (hasPermissionForSubscription) {
                    <gf-premium-indicator class="ml-1" />
                  }
                </h4>
                <p class="m-0">
                  Follow assets you are interested in closely on your watchlist.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        @if (hasPermissionForSubscription) {
          <div class="col-xs-12 col-md-4 mb-3">
            <mat-card appearance="outlined" class="d-flex flex-column h-100">
              <mat-card-content>
                <div class="flex-grow-1">
                  <h4 class="align-items-center d-flex">
                    <span i18n>Market Mood</span>
                    <gf-premium-indicator class="ml-1" />
                  </h4>
                  <p class="m-0">
                    Check the current market mood (<a
                      [routerLink]="routerLinkResources"
                      >Fear & Greed Index</a
                    >) within the app.
                  </p>
                </div>
              </mat-card-content>
            </mat-card>
          </div>
        }
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 class="align-items-center d-flex" i18n>Dark Mode</h4>
                <p class="m-0">
                  Ghostfolio automatically switches to a dark color theme based
                  on your operating system's preferences.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 class="align-items-center d-flex" i18n>Zen Mode</h4>
                <p class="m-0">
                  Keep calm and activate Zen Mode if the markets are going
                  crazy.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 i18n>Multi-Language</h4>
                <p class="m-0">
                  Use Ghostfolio in multiple languages: English,
                  <!-- Català, -->
                  Chinese, Dutch, French, German, Italian, Polish, Portuguese,
                  Spanish and Turkish
                  <!-- and Ukrainian -->
                  are currently supported.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 i18n>Community</h4>
                <p class="m-0">
                  Join the Ghostfolio
                  <a
                    href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
                    title="Join the Ghostfolio Slack community"
                    >Slack</a
                  >
                  community full of enthusiastic investors and discuss the
                  latest market trends.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card appearance="outlined" class="d-flex flex-column h-100">
            <mat-card-content>
              <div class="flex-grow-1">
                <h4 i18n>Open Source Software</h4>
                <p class="m-0">
                  The source code is fully available as
                  <a
                    href="https://github.com/ghostfolio/ghostfolio"
                    title="Find Ghostfolio on GitHub"
                    >open source software</a
                  >
                  (OSS) and licensed under the <i>AGPLv3 License</i>.
                </p>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </div>
  </div>
  @if (hasPermissionToCreateUser && !user) {
    <div class="row">
      <div class="col mt-3 text-center">
        <a
          color="primary"
          i18n
          mat-flat-button
          [routerLink]="routerLinkRegister"
          >Get Started</a
        >
      </div>
    </div>
  }
</div>
